<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 一, 单线程与多线程概念
      //  1.单线程
      //    单线程指的是，在同一个时间只能做一件事，只有前一个任务完成，才能执行后一个任务
      //    优点：不会出现资源抢夺问题
      //    缺点：一旦某个任务耗时过长，后面的任务都必须等待
      //  2.多线程
      //    多线程指的是，在同一个时间，可以有多个任务在执行
      //    优点：可以同时处理多个任务，提高程序的执行效率
      //    缺点：多个任务之间会存在资源抢夺问题，需要通过加锁机制解决

      // 二, Web Worker
      //  1.简介
      //    01.JavaScript语言采用的是单线程模型，也就是说所有任务都只能在一个任务上执行，一次只能做一件事,然而Web Worker的出现就是为了JavaScrip创造多线程环境,允许主线程创建Worker线程,将一些任务分配给后者运行,在主线程运行的，同时并行运行其他线程,两者互不干扰
      //    02.简单可以理解为主线程把任务分配给Worker线程，从而实现多线程
      //  2.实战
      //    01.创建Worker线程并引入新建的worker线程文件
      var worker1 = new Worker("./134.worker1.js") // 这边填入第一个worker线程文件  (需要执行任务的js文件)
      var worker2 = new Worker("./134.worker2.js") // 这边填入第二个worker线程文件  (需要执行任务的js文件)
      var worker3 = new Worker("./134.worker3.js") // 这边填入第三个worker线程文件  (需要执行任务的js文件)
      //    02.主线程通过onmessage来接收子线程处理好的消息
      worker1.onmessage = function (event) {
        // 主线程接收worker1线程发送的消息
        console.log("接收到worker1线程文件返回的文件", event.data)
      }
      worker2.onmessage = function (event) {
        // 主线程接收worker2线程发送的消息
        console.log("接收到worker2线程文件返回的文件", event.data)
      }
      worker3.onmessage = function (event) {
        // 主线程接收worker3线程发送的消息
        console.log("接收到worker3线程文件返回的文件", event.data)
      }
      //  3.案例总结
      //    01.三个worker线程各自完成各自的任务,并且是异步进行,如果只是主线程执行的话那么就需要一个一个的执行这些耗时任务
      console.log("主线程执行完毕")
    </script>
  </body>
</html>
